<template>
  <div class='content'>
    <div class="my-form">
      <el-form ref="form" :model="formData" label-width="100px">
        <el-form-item class="bg" v-for="info in tabHead" :key="info.key" :label="info.label">
          <div v-if="info.key=='id'">{{formData[info.key]}} <el-button class="bg-btn" @click="taking" type="text">查看提货记录
            </el-button>
          </div>
          <div v-else-if="info.key=='setMeal'">
            <div v-for="val in formData.setMeal">
              {{val}} <el-button class="bg-btn" type="text" @click="setting">查看修改记录</el-button>
            </div>
          </div>
          <div v-else-if="info.key=='type'">
            <div>{{formData[info.key]}} <el-button v-if="formData[info.key]=='商家寄存'" class="bg-btn" @click="openBox"
                type="text">添加库存</el-button>
            </div>
          </div>
          <div v-else>{{formData[info.key]}} </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 寄存用户的数据 -->
    <div class="tables">
      <el-table :data="tableData" stripe style="width: 90%">
        <!-- 设置表头数据源，并循环渲染出来，property对应列内容的字段名 -->
        <el-table-column v-for="info in rightHeader" :key="info.key" :property="info.key" :label="info.label"
          align="center">
          <template slot-scope="scope">
            <!-- 渲染对应表格里面的内容 -->
            <span v-if="scope.row.isDisabled">{{scope.row[scope.column.property]}}</span>
            <el-input v-else v-model="scope.row[scope.column.property]"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="set" label="操作" width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button @click="btnState(scope.row)" :type="!scope.row.isDisabled?'success':'primary'" size="small">
              {{!scope.row.isDisabled?'确认':'修改'}}</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 翻页 -->
    <div class="pages">
      <el-pagination background layout="prev, pager, next" :page-size="10" :total="100"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 添加库存弹框 -->
    <el-dialog title="添加商家库存" :visible.sync="dialogTableVisible">
      <el-form :model="formLabel" :rules="rules" :ref="formLabel" label-width="80px" class="formsize">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="formLabel.name"></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="id">
          <el-input v-model="formLabel.id"></el-input>
        </el-form-item>
        <el-form-item label="产品型号" prop="brand">
          <el-input v-model="formLabel.brand"></el-input>
        </el-form-item>
        <el-form-item label="产品品牌" prop="brand">
          <el-input v-model="formLabel.brand"></el-input>
        </el-form-item>
        <el-form-item label="产品类型" prop="type">
          <el-input v-model="formLabel.type"></el-input>
        </el-form-item>
        <el-form-item label="产品数量" prop="num">
          <el-input v-model="formLabel.num"></el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="price">
          <el-input v-model="formLabel.price"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formLabel.note"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        dialogTableVisible: false,
        tabHead: [{
            key: 'id',
            label: '编号'
          },
          {
            key: 'shopName',
            label: '商家名'
          },
          {
            key: 'data',
            label: '申请资料'
          },

          {
            key: 'date',
            label: '审批时间'
          },
          {
            key: 'type',
            label: '入驻类型'
          },
          {
            key: 'shop',
            label: '店铺名称'
          },
          {
            key: 'setMeal',
            label: '已设置套餐'
          }
        ],
        formData: {
          id: 89757,
          data: '很多',
          shopName: '商家1',
          date: '2019-12-27',
          type: '商家寄存',
          shop: '咏春葱油饼',
          setMeal: ['套餐一:1+1', '套餐二:2+2']
        },
        rightHeader: [{
            label: '产品名称',
            key: 'name'
          },
          {
            label: '编号',
            key: 'id'
          },
          {
            label: '品牌',
            key: 'brand'
          },
          {
            label: '型号',
            key: 'model'
          },
          {
            label: '类型',
            key: 'type'
          },
          {
            label: '单价',
            key: 'price'
          },
          {
            label: '数量',
            key: 'num'
          },
          {
            label: '备注',
            key: 'notic'
          },

        ],
        tableData: [{
          name: '产品1',
          id: 'abc123',
          brand: '苹果',
          model: 'iphonex',
          price: 10,
          num: 1000,
          type: '磨砂膜',
          isDisabled: false,
        }, {
          name: '产品2',
          id: 'abc123',
          brand: '苹果',
          model: 'iphonex',
          price: 10,
          num: 1000,
          type: '磨砂膜',
          isDisabled: true,
        }, {
          id: 'abc123',
          name: '产品3',
          brand: '苹果',
          model: 'iphonex',
          price: 10,
          num: 1000,
          type: '磨砂膜',
          isDisabled: true,
        }, {
          id: 'abc123',
          name: '产品4',
          brand: '苹果',
          model: 'iphonex',
          price: 10,
          num: 1000,
          type: '磨砂膜',
          isDisabled: true,
        }],
        formLabel: {
          inventoryType: '',
          name: '',
          id: '',
          brand: '',
          model: '',
          type: '',
          num: '',
          price: '',
          note: ''
        },
        rules: {
          inventoryType: [{
            required: true
          }],
          name: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          id: [{
            required: true
          }],
          brand: [{
            required: true
          }],
          model: [{
            required: true
          }],
          type: [{
            required: true
          }],
          num: [{
            required: true
          }],
          price: [{
            required: true
          }],
        }
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      //确认或修改
      btnState(e) {
        console.log(e)
      },
      //翻页
      handleCurrentChange(e) {
        console.log(e)
      },
      // 打开盒子
      openBox() {
        this.dialogTableVisible = true
      },
      // 提货记录
      taking() {
        this.$router.push({
          path: 'details/taking'
        })
      },
      // 套餐修改记录
      setting() {
          this.$router.push({
          path: 'details/setting'
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  @import '~@/styles/chow.scss'; //引入公共css类

  .my-form {
    width: 90%;
  }

  .bg {
    // border:1px solid red;
    margin: 0;
    min-height: 50px;
    position: relative;
    background-color: #FAFAFA;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    transition: .3s all;

    &-btn {
      position: absolute;
      right: 20px;
    }

    &:nth-child(2n) {
      // border:1px solid red;
      background-color: #FFF;
    }

    &:last-child {
      border-bottom: 1px solid #eee;
    }

    &:hover {
      background-color: #ecf5ff;
    }
  }

  .btn-box {
    margin-top: 50px;

    .el-button {
      width: 100px
    }
  }

  .pages {
    margin-bottom: 60px;
    margin-right: 50px;
  }

</style>
